vite中element plus按需引入最优雅的用法 | 您所在的位置:网站首页 › react vif › vite中element plus按需引入最优雅的用法 |
全局导入
下载安装element plus后,在入口文件配置一下并挂载,就能畅通无阻的使用了。但问题是这样有很多用不上的组件都被打包进来了,导致包的体积非常大。 按需导入采用按需导入的方法,其实是用解构的方式,从element的包中解构出来,再挂载到app上面。这样开发中用到什么组件就打包什么确实很好,减少了包的体积。但是又有一个新的问题,就是每次想要使用新的组件的时候,都要去解构一下,并且挂载。操作起来非常繁琐。 有什么办法能够像使用全局引入那样只配置一次,后面要用到什么组件,都会自己按需加载呢? vite项目演示需要用到两个插件unplugin-vue-components、unplugin-auto-import这两个插件。 先下载npm i unplugin-vue-components unplugin-auto-import -D 然后配置vite.config.js //vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], }) 复制代码还需要再去配置main.js吗? 不需要,安装完element-plus,配置好vite.config.js就完成了。插件会自动挂载处理。 import { createApp } from 'vue' // import ElementPlus from 'element-plus' // import 'element-plus/lib/theme-chalk/index.css' import App from './App.vue' createApp(App).mount('#app') 复制代码这样只配置一次,每次使用组件的时候,都会自己自动导入。完美达成目标。 现在element-plus官网也是这样配的,自己看官网示例把:element-plus.gitee.io/zh-CN/guide… 注意,你们去复制官方代码示例的时候,不要把它按需导入的代码也复制进来。例如 import { ElMessage } from 'element-plus'。因为插件已经自动导入了,所以这样会使得覆盖,导致样式显示不出来。 |
CopyRight 2018-2019 实验室设备网 版权所有 |